<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>user:{{user}}</p>
        <input type="text" v-model="user.name">
        <input type="button" value="为user添加age属性" @click="addAge()">
        <hr>
        <p>user1:{{user1}}</p>
        <input type="text" v-model="user1.name">
        <input type="text" v-model="user1.age">
        <p>user1.hobby:{{user1.hobby}}</p>
        <p v-text="user1.hobby"></p>
        <input type="button" value="为user1添加hobby属性" @click="addHobby()">
        <hr>
        <p>arr:{{arr}}</p>
        <input type="button" value="修改下标1的值" @click="arr[1]='蔡徐坤'">
        <input type="button" value="为数组添加新值" @click="arr[arr.length]='吴亦凡'">
        <input type="button" value="为数组添加新数据" @click="arr.push('鹿晗')">
        <input type="button" value="添加数组值" @click="addArr()">
        <hr>
        <p>user.aaa:{{user.aaa}}</p>
        <input type="text" v-model="user.aaa">
        <input type="button" value="删除user中aaa属性" @click="deleteAaa()">
    </div>
    <input type="button" value="在Vue占位外部添加age属性" onclick="addAge()">
    <input type="button" value="在Vue占位外部添加数组值" onclick="addArr()">
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            user:{
                name:"王振飞",
                aaa:"aaa"
            },
            user1:{},
            arr:[1,2,3,4]
        },
        methods:{
            addAge(){
                // this.user.age=24;
                // this.$set(this.user,"age",25);
                // this.$set(this.$data,"num",10);
                Vue.set(this.user,"age",25);
                console.log(this);
            },
            addHobby(){
                // this.user1.hobby="jungle";
                this.$set(this.user1,"hobby","jungle");
            },
            addArr(){
                this.$set(this.arr,1,"蔡徐坤");
            },
            deleteAaa(){
                this.$delete(this.user,"aaa");
            }
        }
    });
    console.log(vm);
    function addAge(){
        vm.$set(vm.user,"age",25);
    }
    function addArr(){
        vm.arr.splice(1,1,"蔡徐坤");
    }
</script>
</html>